<template>
	<view class="container">
		<view class="header">
			<u-swiper :list="details.imgList" indicator height="340"></u-swiper>
			<!-- <image style="width: 100%" mode="widthFix" src="/static/house.jpg" @error="imageError"></image> -->
		</view>
		<view class="desc">
			<view class="price">
				<view class="view">
					<span>￥{{ details.price }}</span>
					/起
					<view class="originalPrice">￥{{ details.original_price }}</view>
				</view>
				<view class="number">已经服务{{ details.serviceCount }}户</view>
			</view>
			<view class="text">{{ details.pro_name }}</view>
			<view class="promise">
				<!-- <u-button type="primary" shape="circle" text="金牌服务"></u-button> -->
				<view class="btn">金牌服务</view>
				<view class="text">质量保证 售后无忧</view>
			</view>
		</view>
		<view class="service" @click="selectionSpecs">
			<view class="title">
				已选
				<span>{{ serviceParams.lvName }} {{ serviceParams.itemName && serviceParams.itemName.join(',') }}</span>
			</view>
			<u-icon name="arrow-right" color="#666"></u-icon>
		</view>
		<view class="introduce">
			<view class="type">
				<view class="item" @click="changeType(item.id)" :class="item.id === type ? 'active' : ''" v-for="item in typeList" :key="item.id">
					{{ item.name }}
				</view>
			</view>
			<view class="content">
				<rich-text :nodes="details.prodesc" v-if="type === '1'"></rich-text>
				<view class="houseList" v-else>
					<HouseItem class="item" :item="item" v-for="item in houseList" :key="item.id" />
				</view>
			</view>
		</view>
		<view class="select"></view>
		<view class="bottom">
			<view class="ai">
				<image style="width: 48rpx; height: 48rpx" @click="jumpService" mode="widthFix" src="/static/kefu.png" @error="imageError"></image>
				联系客服
			</view>
			<u-button type="primary" shape="circle" @click="selectionSpecs" text="立即购买" color="#21B579"></u-button>
		</view>
		<!-- 选择规格 -->
		<u-popup :show="showService" :round="10" mode="bottom" closeable @close="closePopup">
			<SelectService ref="SelectServiceRef" @submitSpecs="submitSpecs" @changeSpecs="changeSpecs" :total="submitInfo.total_fee" />
		</u-popup>
	</view>
</template>

<script>
import HouseItem from '../index/modules/houstItem.vue';
import SelectService from './modules/selectService.vue';
export default {
	components: {
		HouseItem,
		SelectService
	},

	data() {
		return {
			proId: '',
			details: {},
			type: '1',
			houseList: [],
			showService: false,
			serviceParams: {total:0},
			specsList: {},
			userInfo: {},
			submitInfo:{total_fee:0},
			typeList: [
				{
					name: '服务详情',
					id: '1'
				},
				{
					name: '热门户型',
					id: '2'
				}
			]
			
		};
	},
	onLoad(option) {
		if (option.proId) {
			this.proId = option.proId;
			this.getHouseDetails();
			this.getHouseList();
			this.getServiceItems();
			
		}
		this.getUserInfo();
	},
	methods: {
		// 查询服务产品详情
		getHouseDetails() {
			this.$api.post('/fit/getPro', { proId: this.proId }).then((res) => {
				console.log(res);
				// console.log(res.data.map(item=>item.shuff_img))
				let txt = 'xxx'; //富文本内容
				res.data.prodesc = res.data.prodesc.replace(/<img/gi, '<img style="max-width:100%;height:auto;margin:0 auto;display:block"');

				this.details = res.data;
			});
		},
		// 修改房屋类型
		changeType(e) {
			this.type = e;
		},
		// 热门户型
		getHouseList() {
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.$api.post('/fit/getFitHotPros', { userId: res.data.id }).then((res) => {
						// console.log(res)
						that.houseList = res.data;
					});
				},
				fail(err) {
					uni.redirectTo({
						url: '../login/index'
					});
				}
			});
		},
		// 选取规格
		selectionSpecs() {
			
			
			this.showService = true;
			console.log(this.userInfo.id,'22222')
			this.$nextTick(() => {
				console.log(this.$refs.SelectServiceRef);
				this.$refs.SelectServiceRef.getServiceItems({ specsList: this.specsList, serviceParams: this.serviceParams,userId:this.userInfo.id,proId:this.proId });
			});
		},
		closePopup() {
			this.showService = false;
		},
		// 修改规格
		changeSpecs(params) {
			console.log(params)
			this.serviceParams = params;
			// 获取用户信息

			let data = {
				userId: this.userInfo.id,
				proId: this.proId,
				itemFees: params.itemFees.join(','),
				itemNames: params.itemName.join(','),
				lvFee: params.lvFee,
				lvName: params.lvName
				// total:params.total,
				// addrId:''
			};
			// this.submitPreOrder(params, '1');
		},
		// 规格提交
		submitSpecs(params) {
			console.log(params);
			this.serviceParams = params;
			// 获取用户信息

			this.submitPreOrder(params, '2');
			// console.log(data);

			// closePopup()
		},
		// 预提交订单 计算总金额 计算总金额
		submitPreOrder(params, type) {
			let data = {
				userId: this.userInfo.id,
				proId: this.proId,
				itemFees: params.itemFees.join(','),
				itemNames: params.itemName.join(','),
				lvFee: params.lvFee,
				lvName: params.lvName
				// total:params.total,
				// addrId:''
			};

			this.$api.post('/fit/submitPreOrder', data).then((res) => {
				this.submitInfo = res.data
				console.log(res);
				if (type === '2') {
					this.showService = false;
					
					let data = JSON.stringify(res.data);
					// this.serviceParams.total = res.data.total_fee
					uni.redirectTo({
						url: `/pages/orderConfirm/orderConfirm?data=${data}`
					});
				}
			});
		},
		// 获取服务列表 用户选择服务
		getServiceItems() {
			this.$api.get('/fit/getServiceItems').then((res) => {
				this.specsList = res.data;
				this.serviceParams = {
					itemId: [res.data.items[0].id],
					lvId: res.data.lvs[0].id,
					itemName: [res.data.items[0].name],
					lvName: res.data.lvs[0].name,
					itemFees: [res.data.items[0].fee],
					lvFee: res.data.lvs[0].fee,
					total: res.data.items[0].fee + res.data.lvs[0].fee
				};
				this.changeSpecs(this.serviceParams)
			});
		},
		jumpService(){
			uni.navigateTo({
				url:'/pages/customerService/customerService'
			})
		},
		getUserInfo() {
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					console.log('用户信息', res);
					that.userInfo = res.data;
				},
				fail(err) {
					uni.redirectTo({
						url: '../login/index'
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	padding-bottom: 180rpx;
	.desc {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin: 32rpx;
		.price {
			color: #999;
			display: flex;
			justify-content: space-between;
			align-items: center;
			span {
				font-size: 42rpx;
				color: #f55726;
				font-weight: bold;
				display: inline-block;
				margin-right: 5rpx;
			}
			.view {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.originalPrice {
					margin-left: 20rpx;
					text-decoration: line-through;
					color: #ccc;
					font-size: 22rpx;
				}
			}
			// .number{
			// 	font-size: 22rpx;
			// 	color: #666;
			// }
		}
		.text {
			font-weight: 500;
			color: #333333;
			line-height: 38rpx;
			padding: 10rpx 0;
			font-size: 32rpx;
		}
		.promise {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.btn {
				width: 108rpx;
				height: 36rpx;
				line-height: 36rpx;
				color: #fff;
				background: #21b579;
				border-radius: 6rpx;
				font-size: 22rpx;
				text-align: center;
			}
			.text {
				font-size: 22rpx;
				color: #666;
				margin-left: 8rpx;
			}
		}
	}
	.service {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin: 32rpx;
		.title {
			font-size: 28rpx;
			color: #333;
			span {
				color: #21b579;
				padding-left: 20rpx;
			}
		}
	}
	.introduce {
		// margin-bottom: 260rpx;
		.type {
			display: flex;
			justify-content: space-around;
			height: 92rpx;
			line-height: 92rpx;
			background-color: #fff;
			color: #666;
			font-size: 28rpx;
			.item {
				// width: 50%;
				text-align: center;
				// background-color: #f7f7f8;
				// border-bottom: 2rpx solid #f00;
				border-bottom: 4rpx #fff solid;
			}
			.active {
				// background-color: #fff;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				border-bottom: 4rpx #21b579 solid;
				color: #333;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
		.content {
			margin-top: 32rpx;
			padding: 0 32rpx;
			// border-radius: 16rpx;
			image {
				width: 100% !important;
			}
		}
		.houseList {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			// gap: 30rpx 24rpx;
			.item {
				box-sizing: border-box;
				width: calc(50% - 16rpx);
				// width: 50%;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 30rpx 16rpx;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		right: 0;

		.ai {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 18rpx;
			margin-right: 80rpx;
			width: 160rpx;
		}
	}
}
</style>
